<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品热度排行</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/census/courseRanking.css">
</head>
<body>
    <div class="layui-row">
        <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header">
                    商品热度排行
                    <div class="fr" style="margin-bottom: 10px">
                        <button onclick="refresh()" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-refresh-1"></i>
                            刷新
                        </button>
                        <button onclick="backOff()" type="button" class="layui-btn layui-btn-sm">
                            <i class="layui-icon layui-icon-return"></i>
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs11 layui-col-sm11 layui-col-md11 btn">
            <button onclick="getHits()" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-praise"></i>
                点击数量排行
            </button>
            <button onclick="getCollection()" type="button" class="layui-btn">
                <i class="layui-icon layui-icon-read"></i>
                收藏数量排行
            </button>
        </div>
        <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backWhite" style=" font-size: 16px; height: 40px; font-weight: bold;">
                    <i class="layui-icon layui-icon-group"></i>
                    商品热度统计
                </div>
                <table id="content" cellspacing="0" cellpadding="0">
                    <tr id="product" >
                        <!--<td class="tdhead">商品类型</td>-->
                    </tr>
                    <tr style="background: #F3F3F3" id="hits" >
                        <!--<td class="tdbody">点击次数</td>-->
                    </tr>
                </table>
            </div>
        </div>
        <div class="layui-col-xs11 layui-col-sm11 layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backWhite" style=" font-size: 16px; height: 40px; font-weight: bold;">
                    <i class="layui-icon layui-icon-chart-screen"></i>
                    商品热度统计
                </div>
            </div>
            <div class="fr" id="linear"></div>
        </div>
    </div>
</body>
<!--<script src="/js/census/courseRanking.js"></script>-->
<script src="/echarts/echarts.js"></script>
<script>
    var $,
        layer,
        form,
        upload,
        table,
        dianji = [],
        shoucang = [],
        productName = [];

    layui.use(['jquery', 'layer', 'table', 'form', 'upload'], function () {
        $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,
            table = layui.table;
    });
    getHits();
    //点击量排行
    function getHits() {
        $.ajax({
            url:'/JsProductCategroy/getHits',
            type: "post",
            dataType:'json',
            async: false,
            data: {},
            success:function (data) {
                console.log(data);
                data = data.data;

                for (var i = 0; i<data.length;i++){
                    dianji.push(data[i].hits);
                    productName.push(data[i].title);
                    console.log(dianji);
                    console.log(productName);
                }

                $('#product td').remove();
                $('#product').append('<td class="tdhead">商品类型</td>');
                $('#hits td').remove();
                $('#hits').append('<td class="tdbody">点击次数</td>');
                for(var i =0;i<data.length;i++){
                    $('#hits').append('<td class="tdbody">'+data[i].hits+'</td>');
                    $('#product').append('<td class="tdhead">'+data[i].title+'</td>');
                }
            }
        })
    }
    getCollection();
    //收藏量排行
    function getCollection() {
        $.ajax({
            url:'/JsProductCategroy/getCollection',
            type: "post",
            dataType:'json',
            async: false,
            success:function (data) {
                console.log(data);
                data=data.data;

                for (var i = 0; i<data.length;i++){
                    shoucang.push(data[i].hits);
                    console.log(shoucang);
                }

                $('#product td').remove();
                $('#product').append('<td class="tdhead">商品类型</td>');
                $('#hits td').remove();
                $('#hits').append('<td class="tdbody">收藏次数</td>');
                for(var i =0;i<data.length;i++){
                    $('#hits').append('<td class="tdbody">'+data[i].hits+'</td>');
                    $('#product').append('<td class="tdhead">'+data[i].title+'</td>');
                }
            }
        })
        console.log(shoucang);
    }
    char(productName,dianji,shoucang);
    //Ztree
    function char(productName,dianji,shoucang) {
        var myChart = echarts.init(document.getElementById('linear'));
        option = {
            title: {
                text: '微圈统计图',
                subtext: '思云产品'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['商品点击统计', '商品收藏统计']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: productName
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '商品点击统计',
                    type: 'bar',
                    data: dianji,
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
                {
                    name: '商品收藏统计',
                    type: 'bar',
                    data: shoucang,
                    markPoint: {
                        data: [
                            { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                }
            ]
        };
        myChart.setOption(option);
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
            }
        },200);
    }
    //刷新
    function refresh() {
        window.location.reload();
    }

    //返回
    function backOff() {
        var arr = localStorage.getItem("numArr");
        var numArr = arr.split(",");
        numArr.pop();
        window.parent.layui.element.tabChange('tab', numArr[numArr.length - 1]);
        localStorage.setItem("numArr", numArr);
    }





</script>
</html>